
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-stop"></i>
                    <div class="name">stop</div>
                    <div class="fontclass">.icon-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stop1"></i>
                    <div class="name">stop</div>
                    <div class="fontclass">.icon-stop1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zaixian"></i>
                    <div class="name">在线</div>
                    <div class="fontclass">.icon-zaixian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neirong"></i>
                    <div class="name">内容</div>
                    <div class="fontclass">.icon-neirong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-35"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-35</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanting"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-zanting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingweifenxi"></i>
                    <div class="name">行为分析</div>
                    <div class="fontclass">.icon-xingweifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neirongjiance"></i>
                    <div class="name">内容监测</div>
                    <div class="fontclass">.icon-neirongjiance</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxi"></i>
                    <div class="name">分析</div>
                    <div class="fontclass">.icon-fenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoqian"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-biaoqian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-play"></i>
                    <div class="name">play</div>
                    <div class="fontclass">.icon-play</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huodong"></i>
                    <div class="name">活动</div>
                    <div class="fontclass">.icon-huodong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-app"></i>
                    <div class="name">app</div>
                    <div class="fontclass">.icon-app</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pindao"></i>
                    <div class="name">频道</div>
                    <div class="fontclass">.icon-pindao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pindao1"></i>
                    <div class="name">频道</div>
                    <div class="fontclass">.icon-pindao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youjiantou"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-youjiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuojiantou"></i>
                    <div class="name">左箭头</div>
                    <div class="fontclass">.icon-zuojiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shang"></i>
                    <div class="name">上</div>
                    <div class="fontclass">.icon-shang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xia"></i>
                    <div class="name">下</div>
                    <div class="fontclass">.icon-xia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuo"></i>
                    <div class="name">左</div>
                    <div class="fontclass">.icon-zuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xitongzhuangtai"></i>
                    <div class="name">系统状态</div>
                    <div class="fontclass">.icon-xitongzhuangtai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-text"></i>
                    <div class="name">text</div>
                    <div class="fontclass">.icon-text</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huodong1"></i>
                    <div class="name">活动</div>
                    <div class="fontclass">.icon-huodong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shebei"></i>
                    <div class="name">设备</div>
                    <div class="fontclass">.icon-shebei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pindaobofang"></i>
                    <div class="name">频道播放</div>
                    <div class="fontclass">.icon-pindaobofang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziliaoshouce"></i>
                    <div class="name">22资料、手册</div>
                    <div class="fontclass">.icon-ziliaoshouce</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuzhijiagoujiekou"></i>
                    <div class="name">24组织架构、接口</div>
                    <div class="fontclass">.icon-zuzhijiagoujiekou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liaotianduihua"></i>
                    <div class="name">208聊天、对话</div>
                    <div class="fontclass">.icon-liaotianduihua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liaotianduihua-xianxing"></i>
                    <div class="name">208聊天、对话-线性</div>
                    <div class="fontclass">.icon-liaotianduihua-xianxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laba"></i>
                    <div class="name">212喇叭</div>
                    <div class="fontclass">.icon-laba</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian-xianxing"></i>
                    <div class="name">217时间-线性</div>
                    <div class="fontclass">.icon-shijian-xianxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huaxiangfenxi"></i>
                    <div class="name">画像分析</div>
                    <div class="fontclass">.icon-huaxiangfenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shebei1"></i>
                    <div class="name">设备</div>
                    <div class="fontclass">.icon-shebei1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diantai"></i>
                    <div class="name">电台</div>
                    <div class="fontclass">.icon-diantai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diantai1"></i>
                    <div class="name">电台</div>
                    <div class="fontclass">.icon-diantai1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dadiantai"></i>
                    <div class="name">大电台</div>
                    <div class="fontclass">.icon-dadiantai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diantaishezhi"></i>
                    <div class="name">电台设置</div>
                    <div class="fontclass">.icon-diantaishezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinggao"></i>
                    <div class="name">警告</div>
                    <div class="fontclass">.icon-jinggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghaoquanxianguanli"></i>
                    <div class="name">账号权限管理</div>
                    <div class="fontclass">.icon-zhanghaoquanxianguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-vynil"></i>
                    <div class="name">音乐</div>
                    <div class="fontclass">.icon-vynil</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoqian1"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-biaoqian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuju"></i>
                    <div class="name">数据</div>
                    <div class="fontclass">.icon-shuju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_renwujincheng"></i>
                    <div class="name">icon_任务进程</div>
                    <div class="fontclass">.icon-icon_renwujincheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_yiwenkongxin"></i>
                    <div class="name">icon_疑问空心</div>
                    <div class="fontclass">.icon-icon_yiwenkongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_tianjia"></i>
                    <div class="name">icon_添加</div>
                    <div class="fontclass">.icon-icon_tianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongyezujian-kaiguan"></i>
                    <div class="name">工业组件-开关</div>
                    <div class="fontclass">.icon-gongyezujian-kaiguan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiao-zhuzhuangtu"></i>
                    <div class="name">图表-柱状图</div>
                    <div class="fontclass">.icon-tubiao-zhuzhuangtu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingzhuang-tupian"></i>
                    <div class="name">形状-图片</div>
                    <div class="fontclass">.icon-xingzhuang-tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengmingxianjilu"></i>
                    <div class="name">生命线记录</div>
                    <div class="fontclass">.icon-shengmingxianjilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-play1"></i>
                    <div class="name">play</div>
                    <div class="fontclass">.icon-play1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lishi"></i>
                    <div class="name">历史</div>
                    <div class="fontclass">.icon-lishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-check-circle"></i>
                    <div class="name">check-circle</div>
                    <div class="fontclass">.icon-check-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close-circle"></i>
                    <div class="name">close-circle</div>
                    <div class="fontclass">.icon-close-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-frown"></i>
                    <div class="name">frown</div>
                    <div class="fontclass">.icon-frown</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-left-circle"></i>
                    <div class="name">left-circle</div>
                    <div class="fontclass">.icon-left-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-down-circle"></i>
                    <div class="name">down-circle</div>
                    <div class="fontclass">.icon-down-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-minus-circle"></i>
                    <div class="name">minus-circle</div>
                    <div class="fontclass">.icon-minus-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plus-circle"></i>
                    <div class="name">plus-circle</div>
                    <div class="fontclass">.icon-plus-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-play-circle"></i>
                    <div class="name">play-circle</div>
                    <div class="fontclass">.icon-play-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-question-circle"></i>
                    <div class="name">question-circle</div>
                    <div class="fontclass">.icon-question-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-right-circle"></i>
                    <div class="name">right-circle</div>
                    <div class="fontclass">.icon-right-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-smile"></i>
                    <div class="name">smile</div>
                    <div class="fontclass">.icon-smile</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time-circle"></i>
                    <div class="name">time-circle</div>
                    <div class="fontclass">.icon-time-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-timeout"></i>
                    <div class="name">time out</div>
                    <div class="fontclass">.icon-timeout</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-up-circle"></i>
                    <div class="name">up-circle</div>
                    <div class="fontclass">.icon-up-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sync"></i>
                    <div class="name">sync</div>
                    <div class="fontclass">.icon-sync</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-transaction"></i>
                    <div class="name">transaction</div>
                    <div class="fontclass">.icon-transaction</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-reloadtime"></i>
                    <div class="name">reload time</div>
                    <div class="fontclass">.icon-reloadtime</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-message"></i>
                    <div class="name">message</div>
                    <div class="fontclass">.icon-message</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dashboard"></i>
                    <div class="name">dashboard</div>
                    <div class="fontclass">.icon-dashboard</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-issuesclose"></i>
                    <div class="name">issues close</div>
                    <div class="fontclass">.icon-issuesclose</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-poweroff"></i>
                    <div class="name">poweroff</div>
                    <div class="fontclass">.icon-poweroff</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-logout"></i>
                    <div class="name">logout</div>
                    <div class="fontclass">.icon-logout</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-login"></i>
                    <div class="name">login</div>
                    <div class="fontclass">.icon-login</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-piechart"></i>
                    <div class="name">pie chart</div>
                    <div class="fontclass">.icon-piechart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-setting"></i>
                    <div class="name">setting</div>
                    <div class="fontclass">.icon-setting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-eye"></i>
                    <div class="name">eye</div>
                    <div class="fontclass">.icon-eye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-location"></i>
                    <div class="name">location</div>
                    <div class="fontclass">.icon-location</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-adduser"></i>
                    <div class="name">add user</div>
                    <div class="fontclass">.icon-adduser</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-addteam"></i>
                    <div class="name">addteam</div>
                    <div class="fontclass">.icon-addteam</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user"></i>
                    <div class="name">user</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-team"></i>
                    <div class="name">team</div>
                    <div class="fontclass">.icon-team</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-like"></i>
                    <div class="name">like</div>
                    <div class="fontclass">.icon-like</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unlike"></i>
                    <div class="name">unlike</div>
                    <div class="fontclass">.icon-unlike</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-medicinebox"></i>
                    <div class="name">medicinebox</div>
                    <div class="fontclass">.icon-medicinebox</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder-open"></i>
                    <div class="name">folder-open</div>
                    <div class="fontclass">.icon-folder-open</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-scan"></i>
                    <div class="name">scan</div>
                    <div class="fontclass">.icon-scan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-barcode"></i>
                    <div class="name">barcode</div>
                    <div class="fontclass">.icon-barcode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-camera"></i>
                    <div class="name">camera</div>
                    <div class="fontclass">.icon-camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud-upload"></i>
                    <div class="name">cloud-upload</div>
                    <div class="fontclass">.icon-cloud-upload</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud-download"></i>
                    <div class="name">cloud-download</div>
                    <div class="fontclass">.icon-cloud-download</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fund"></i>
                    <div class="name">fund</div>
                    <div class="fontclass">.icon-fund</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-image"></i>
                    <div class="name">image</div>
                    <div class="fontclass">.icon-image</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star"></i>
                    <div class="name">star</div>
                    <div class="fontclass">.icon-star</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wifi"></i>
                    <div class="name">wifi</div>
                    <div class="fontclass">.icon-wifi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-attachment"></i>
                    <div class="name">attachment</div>
                    <div class="fontclass">.icon-attachment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shrink"></i>
                    <div class="name">shrink</div>
                    <div class="fontclass">.icon-shrink</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrawsalt"></i>
                    <div class="name">arrawsalt</div>
                    <div class="fontclass">.icon-arrawsalt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-verticalright"></i>
                    <div class="name">vertical right</div>
                    <div class="fontclass">.icon-verticalright</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-verticalleft"></i>
                    <div class="name">vertical left</div>
                    <div class="fontclass">.icon-verticalleft</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-right"></i>
                    <div class="name">right</div>
                    <div class="fontclass">.icon-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-left"></i>
                    <div class="name">left</div>
                    <div class="fontclass">.icon-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-up"></i>
                    <div class="name">up</div>
                    <div class="fontclass">.icon-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-down"></i>
                    <div class="name">down</div>
                    <div class="fontclass">.icon-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fullscreen"></i>
                    <div class="name">fullscreen</div>
                    <div class="fontclass">.icon-fullscreen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fullscreen-exit"></i>
                    <div class="name">fullscreen-exit</div>
                    <div class="fontclass">.icon-fullscreen-exit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrowright"></i>
                    <div class="name">arrowright</div>
                    <div class="fontclass">.icon-arrowright</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrowup"></i>
                    <div class="name">arrowup</div>
                    <div class="fontclass">.icon-arrowup</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrowleft"></i>
                    <div class="name">arrowleft</div>
                    <div class="fontclass">.icon-arrowleft</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrowdown"></i>
                    <div class="name">arrowdown</div>
                    <div class="fontclass">.icon-arrowdown</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upload"></i>
                    <div class="name">upload</div>
                    <div class="fontclass">.icon-upload</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stock"></i>
                    <div class="name">stock</div>
                    <div class="fontclass">.icon-stock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rise"></i>
                    <div class="name">rise</div>
                    <div class="fontclass">.icon-rise</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-indent"></i>
                    <div class="name">indent</div>
                    <div class="fontclass">.icon-indent</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-menu"></i>
                    <div class="name">menu</div>
                    <div class="fontclass">.icon-menu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unorderedlist"></i>
                    <div class="name">unordered list</div>
                    <div class="fontclass">.icon-unorderedlist</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-orderedlist"></i>
                    <div class="name">ordered list</div>
                    <div class="fontclass">.icon-orderedlist</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-align-right"></i>
                    <div class="name">align-right</div>
                    <div class="fontclass">.icon-align-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-align-center"></i>
                    <div class="name">align-center</div>
                    <div class="fontclass">.icon-align-center</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bg-colors"></i>
                    <div class="name">bg-colors</div>
                    <div class="fontclass">.icon-bg-colors</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lishi1"></i>
                    <div class="name">历史</div>
                    <div class="fontclass">.icon-lishi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shishi"></i>
                    <div class="name">实时</div>
                    <div class="fontclass">.icon-shishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-frown-fill"></i>
                    <div class="name">frown-fill</div>
                    <div class="fontclass">.icon-frown-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-smile-fill"></i>
                    <div class="name">smile-fill</div>
                    <div class="fontclass">.icon-smile-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diff-fill"></i>
                    <div class="name">diff-fill</div>
                    <div class="fontclass">.icon-diff-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-file-copy-fill"></i>
                    <div class="name">file-copy-fill</div>
                    <div class="fontclass">.icon-file-copy-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-snippets-fill"></i>
                    <div class="name">snippets-fill</div>
                    <div class="fontclass">.icon-snippets-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-batchfolding-fill"></i>
                    <div class="name">batch folding-fill</div>
                    <div class="fontclass">.icon-batchfolding-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-reconciliation-fill"></i>
                    <div class="name">reconciliation-fill</div>
                    <div class="fontclass">.icon-reconciliation-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder-add-fill"></i>
                    <div class="name">folder-add-fill</div>
                    <div class="fontclass">.icon-folder-add-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder-fill"></i>
                    <div class="name">folder-fill</div>
                    <div class="fontclass">.icon-folder-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder-open-fill"></i>
                    <div class="name">folder-open-fill</div>
                    <div class="fontclass">.icon-folder-open-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-database-fill"></i>
                    <div class="name">database-fill</div>
                    <div class="fontclass">.icon-database-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-calendar-check-fill"></i>
                    <div class="name">calendar-check-fill</div>
                    <div class="fontclass">.icon-calendar-check-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-image-fill"></i>
                    <div class="name">image-fill</div>
                    <div class="fontclass">.icon-image-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-idcard-fill"></i>
                    <div class="name">id card-fill</div>
                    <div class="fontclass">.icon-idcard-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-creditcard-fill"></i>
                    <div class="name">credit card-fill</div>
                    <div class="fontclass">.icon-creditcard-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fund-fill"></i>
                    <div class="name">fund-fill</div>
                    <div class="fontclass">.icon-fund-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-read-fill"></i>
                    <div class="name">read-fill</div>
                    <div class="fontclass">.icon-read-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-contacts-fill"></i>
                    <div class="name">contacts-fill</div>
                    <div class="fontclass">.icon-contacts-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-moneycollect-fill"></i>
                    <div class="name">money collect-fill</div>
                    <div class="fontclass">.icon-moneycollect-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sound-fill"></i>
                    <div class="name">sound-fill</div>
                    <div class="fontclass">.icon-sound-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-location-fill"></i>
                    <div class="name">location-fill</div>
                    <div class="fontclass">.icon-location-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud-fill"></i>
                    <div class="name">cloud-fill</div>
                    <div class="fontclass">.icon-cloud-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unlike-fill"></i>
                    <div class="name">unlike-fill</div>
                    <div class="fontclass">.icon-unlike-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star-fill"></i>
                    <div class="name">star-fill</div>
                    <div class="fontclass">.icon-star-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unlock-fill"></i>
                    <div class="name">unlock-fill</div>
                    <div class="fontclass">.icon-unlock-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-thunderbolt-fill"></i>
                    <div class="name">thunderbolt-fill</div>
                    <div class="fontclass">.icon-thunderbolt-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tag-fill"></i>
                    <div class="name">tag-fill</div>
                    <div class="fontclass">.icon-tag-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wrench-fill"></i>
                    <div class="name">wrench-fill</div>
                    <div class="fontclass">.icon-wrench-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tags-fill"></i>
                    <div class="name">tags-fill</div>
                    <div class="fontclass">.icon-tags-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bank-fill"></i>
                    <div class="name">bank-fill</div>
                    <div class="fontclass">.icon-bank-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-camera-fill"></i>
                    <div class="name">camera-fill</div>
                    <div class="fontclass">.icon-camera-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mail-fill"></i>
                    <div class="name">mail-fill</div>
                    <div class="fontclass">.icon-mail-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-car-fill"></i>
                    <div class="name">car-fill</div>
                    <div class="fontclass">.icon-car-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-setting-fill"></i>
                    <div class="name">setting-fill</div>
                    <div class="fontclass">.icon-setting-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-apple"></i>
                    <div class="name">apple</div>
                    <div class="fontclass">.icon-apple</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-android"></i>
                    <div class="name">android</div>
                    <div class="fontclass">.icon-android</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-android-fill"></i>
                    <div class="name">android-fill</div>
                    <div class="fontclass">.icon-android-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-apple-fill"></i>
                    <div class="name">apple-fill</div>
                    <div class="fontclass">.icon-apple-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-HTML-fill"></i>
                    <div class="name">HTML5-fill</div>
                    <div class="fontclass">.icon-HTML-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-windows-fill"></i>
                    <div class="name">windows-fill</div>
                    <div class="fontclass">.icon-windows-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-twitter"></i>
                    <div class="name">twitter</div>
                    <div class="fontclass">.icon-twitter</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-svg-"></i>
                    <div class="name">留存分析</div>
                    <div class="fontclass">.icon-svg-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shujuwajue"></i>
                    <div class="name">数据挖掘</div>
                    <div class="fontclass">.icon-shujuwajue</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
